<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>metro-bootstrap: Twitter Bootstrap with Metro style</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link rel="stylesheet" type="text/css" href="dist/css/metro-bootstrap.min.css">
    <link rel="stylesheet" href="styles/font-awesome.min.css">

	<style>



  .grid .row {
    background-color: transparent;
    border: 0;
    height: 50px;
    padding-right: 0;
    
  }
  .grid .row .col-md-3
    {
        min-height: 150px;
    }
  .grid .row .col-md-6
    {
        min-height: 300px;
    }

	</style>
  </head>  
  <body >

  <div class="grid">
     <div class="row col-md-12">
          <div class="tile tile-clouds col-md-3 col-xs-12"  >
            <a href="#" >
              <h1>Hello</h1>
            </a>
          </div>
          <div class="tile tile-emerald col-md-3 col-xs-12"  >
          </div>
          <div class="tile tile-turquoise col-md-3 col-xs-12"  ></div>
          <div class="tile tile-amethyst col-md-3 col-xs-12"  ></div>
      </div>
      <div class="row col-md-12">
      </div>
      <div class="row col-md-12">
      </div>
      <div class="row col-md-12">
          <div class="tile col-md-3 col-xs-12"  >
            <div class="tile-content">
              <div class="tile-icon-large">
                <img src="images/twittertile.png">
              </div>
            </div>
            <span class="tile-label">Tile 1</span>
          </div>
          <div class="tile tile-clouds col-md-3 col-xs-12"  >
            <span class="tile-label">Tile 2</span>
          </div>
          <div class="tile tile-carrot col-md-6 col-xs-12">
          <div class="tile-content">
              <div class="tile-icon-large">
                <img src="images/twittertile.png">
              </div>
            </div>
            <span class="tile-label">Tile 3</span>
          </div>
      </div>
      <div class="row col-md-12"></div>
      <div class="row col-md-12"></div>
      <div class="row col-md-12">
          <div class="tile tile-alizarin col-md-3 col-xs-12"  >
            <span class="tile-label">Tile 4</span>
          </div>
          <div class="tile tile-danger col-md-3 col-xs-12"  >
            <span class="tile-label">Tile 5</span>
          </div>
      </div>
    </div>

    

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript" src="scripts/metro-docs.js"></script>
  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36060270-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  
  
  $('#collapse-sidebar').click(function()
  {
	
	$('.navbar-side').toggleClass('navbar-side-closed');
	$('#wrapper').toggleClass('wrapper-full');
	
	
  });

</script>

  </body>
</html>
